.header {
    padding: 1.5rem 0;
    position: relative;
    // display: flex;

    .navigation-header {
        margin-bottom: 20px;

        .card-label {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 0.875rem;
            margin-left: 20px;
            margin-right: 20px;
            background-color: #e9eaf9;
            color: #a7acef;

            .label-text {
                font-size: 0.875rem;
                margin-right: 6px;
            }

            .label-count {
                font-size: 0.875rem;
            }

        }

        // .cardLabel {}
    }

    .button-container {
        display: flex;
        justify-content: center;
        gap: 6px;

        .circle-button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background-color: #e9eaf9;
            color: #6A6FB6;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .circle-button.active {
            background-color: #A7ACEF;
            ;
            transform: scale(1.05);
        }

        .circle-button:hover {
            opacity: 0.8;
        }
    }

    .title-card {
        margin: 20px;
        border-radius: 8px;
        border: none;
        background-color: #a7acef1a;
    }

    .card-button {
        width: 90%;
        padding: 1rem 2rem;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5rem;
        font-weight: 700;
        background-color: #a7acef;
        color: #ffffff;
    }
}